<template>
  <div>
    <!-- 首页--- {{$store.state.count}}
   <h3>
    我是getters: {{$store.getters.newCount}}
   </h3>
   <div>
    <van-button type='info' @click="add(1)"> +1</van-button>
    <van-button type='info' @click="add(5)"> +5</van-button>
    <van-button type='info' @click="add(10)"> +10</van-button>
   </div> -->
    <!-- 购物车 -->
    <van-grid :column-num="2">
      <van-grid-item
        v-for="item in $store.state.list"
        @click="addItem(item)"
        :key="item.id"
        :icon="item.img"
        text="+"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  created() {
    // this.$store.state.list
  },

  // methods: {
  //   add(num) {
  //     //.vue文件不写逻辑 只调用
  //     // this.$store.state.count += 1 错误

  //     // 正确
  //     // 通过this.$store.commit("函数名称，传递的参数") 来触发mutations中定义的方法
  //     this.$store.commit("ADD_COUNT",num)

  //   },
  //   del() {
  //     this.$store.commit('delCount')
  //   }
  // },
  methods:{
    addItem(item) {
      // vuex插件的功能
      // this.$toast("添加") 普通
      this.$toast({
        type: "success",
        message:"添加成功"
      })
      // commit方法提交到  Mutation
      this.$store.commit("ADD_CARLIST", {
        item
      })
    }
  }
}
</script>

<style></style>
